<template>
	<div class="shop-cart">
		<div class="cart-top">
			<ul class="no-style" style="line-height: 54px;">
				<!-- 选择按钮 -->
				<li style="width: 8%;">
					<div select>
						<input type="checkbox" ref="select_all" id="select_all" @click="select_all()"><label for="select_all">全选</label>
					</div>
				</li>
				<!-- 商品信息 -->
				<li class="item-info">
					<div> 商品信息 </div>
				</li>
				<!-- 数量 -->
				<li class="item-num">
					<div> 数量 </div>
				</li>
				<!-- 单价 -->
				<li class="item-price">
					<div> 单价 </div>
				</li>
				<!-- 金额 -->
				<li class="item-totalprice">
					<div> 金额 </div>
				</li>
				<!-- 操作 -->
				<li class="item-option">
					<div> 操作 </div>
				</li>
			</ul>
			<!-- 商品主体 -->
			<ul class="no-style" v-for="item in items" :key="item.id" :ref="'item'+item.id">
				<!-- 选择按钮 -->
				<li class="select" @click="click_item(item.id)">
					<div select>
						<input type="checkbox" v-model="select_ids" :value="item.id" :id="item.id" v-show="false">
						<p class="selectdisabled">选择</p>
					</div>
				</li>
				<!-- 商品信息 -->
				<li class="item-info">
					<div picture style="float:left; width: 30%;max-width: 30%;line-height: 0">
						<img :src="item.img" alt="" style="width: 100%" @click="passsrcURL(item.img)">
					</div>
					<div style="float:left;width: 70%;">
						{{ item.title }}
					</div>
				</li>
				<!-- 数量 -->
				<li class="item-num">
					<div>
						<el-input-number v-model="item.num" :min="1"></el-input-number>
					</div>
				</li>
				<!-- 单价 -->
				<li class="item-price">
					<div>
						{{ item.price }}
					</div>
				</li>
				<!-- 金额 -->
				<li class="item-totalprice">
					<div>
						{{ $realPrice($realPrice(item.num) * $realPrice(item.price))}}
					</div>
				</li>
				<!-- 操作 -->
				<li class="item-option">
					<div>
						<a class="no-style" @click="del_shop({
							id: item.id,
							username: $store.state.logreg.active_user
						})">删除</a>
					</div>
				</li>
			</ul>
		</div>
		<!-- 总价和结算按钮 -->
		<div class="cart-bottom">
			<span class="pricetips">合计:</span>
			<span class="pricetips" style="color: red;">￥</span>
			<span class="price">{{ total_price }}</span>
			<a href="" class="no-style" @click.prevent="to_pay()">结算</a>
		</div>
		<LargePicture :srcURL="src" v-if="isenlarge"></LargePicture>
	</div>
</template>

<script>
	import {mapState ,mapMutations} from 'vuex'
	import LargePicture from '../components/LargePicture.vue'

	export default {
		data() {
			return {
				select_ids: [],
				is_select_all: false,
				src:''
			}
		},
		computed: {
			// 商品列表
			items() {
				return this.$store.state.cart.shop_cart[this.$store.state.logreg.active_user]
			},
			// 购物车内商品的总价
			total_price() {
				let total_price = 0;
				for (let item of this.items) {
					this.select_ids.indexOf(item.id) != -1 ? total_price += Number(item.num)*Number(item.price) : {};
				}
				return this.$realPrice(total_price)
			},
			...mapState([
				'isenlarge'
			])
		},
		methods: {
			// 全选
			select_all() {
				// 如果当前已全选
				if (this.select_ids.length == this.items.length){
					this.select_ids.splice(0,this.select_ids.length);
				}
				// 如果当前未全选
				else{
					this.select_ids.splice(0,this.select_ids.length);
					for (let item of this.items){
						this.select_ids.push(item.id)
					}
				}
			},
			// 点击商品条目相当于点击选择框
			click_item(id) {
				document.querySelector('[id="'+id+'"]').click()
			},
			// 放大商品图片
			passsrcURL:function(src){
				this.src = src
				this.setpicturesize(true)
			},
			// 准备付款
			to_pay() {
				if (this.select_ids.length == 0){
					this.$message({
						message: '请至少选择一件商品',
						type: 'warning'
					})
					return null
				}
				// 提交已选的商品id
				this.before_pay(this.select_ids);
				// 跳转到结算页面
				this.$router.push('/settleaccounts')
				// 注册自定义事件关闭购物车界面
				this.$emit('close_cart')
			},
			...mapMutations('cart',[
				'del_shop',
				'before_pay',
			]),
			...mapMutations([
				'setpicturesize'
			])
		},
		watch: {
			select_ids(new_val,old) {
				// 监测是否全选
				if (new_val.length == this.items.length){
					this.$refs.select_all.checked = true;
				}else{
					this.$refs.select_all.checked = false;
				}
				// 选中的商品条目改变样式
				for (let item in this.$refs){
					if(this.select_ids.indexOf(Number(item.slice(4))) != -1 ){
						let a = this.$refs[item][0]
						a.style.backgroundColor = 'rgba(255,33,55,.5)'
					}
					if(this.select_ids.indexOf(Number(item.slice(4))) == -1 ){
						try{
							this.$refs[item][0].style.backgroundColor = ''
						}catch(e){
							
						}
					}
				}
			}
		},
		mounted(){
			if (document.getElementsByClassName('selectdisabled')[0]){
				document.getElementsByClassName('selectdisabled')[0].onselectstart = function(){return false}
			}
		},
		components: {
			LargePicture
		}
	}
</script>

<style scoped lang="less">
	// * {
	// 	border: solid white 1px;
	// 	box-sizing: border-box;
	// }
	p.selectdisabled {
		font-size: 24px;
		font-weight: 700;
		font-family: 'Times New Roman', Times, serif;
	}
	.shop-cart {
		border: solid black 1px;
		margin: 2rem auto;
		overflow: hidden;
		text-align: center;
		width: 90%;
		min-width: 1000px;
		
		.cart-top {
			overflow: hidden;
			
			.select {
				width: 8%;
			}
			.select:hover {
				background-color: rgb(96, 96, 97);
				border-radius: 5px;
				margin-top: 20px;
				height: 120px;
				cursor: pointer;
				line-height: 120px;
			}
			.item-info {
				width: 40%;
			}
			.item-num {
				width: 13%;
				position: relative;
				display: block; 	
			}
			.item-price {
				width: 13%;
			}
			.item-totalprice {
				width: 13%;
			}
			.item-option {
				width: 13%;
				
				a:hover {
					text-decoration: underline;
					cursor: pointer;
				}
			}
			
			
			ul {
				overflow:hidden;
				border-bottom: black solid 1px;
				padding: 0.5rem 0;
				line-height: 160px;
				
				li {
					float: left;
					
				}
			}
		}
		
		.cart-bottom {
			position: absolute;
			top: -15px;
			right: 12%;
			min-width: 15em;
			font-family:sans-serif;
			margin:12px;
			padding:8px 8px 8px 25px;
			font-weight:800;
			letter-spacing:1px;
		
			span.pricetips {
				font-size: 16px;
				color: black;
			}		
			span.price {
				font-size: 30px;
				margin-right: 2rem;
				color: red;
			}
			a {
				font-size: 24px;
				position: relative;
				bottom: 3px;
				display: inline-block;
				line-height: 52px;
				height: 50px;
				background-color: rgb(171, 190, 62);
				padding: 0px 36px;
				border-radius: 6px;
				margin-top: 10px;
			}
		}
	}
	
	
</style>
